<example name="Button">

  <file type="css">
    button {
      margin-right: 8px !important;
      margin-bottom: 8px !important;
    }
  </file>

  <file type="html">
    <div id="buttons">
      <span id="button"></span><span id="button-icon"></span><span
      id="button-short"></span>
    </div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import caretDownIcon from '@jetbrains/icons/caret-down.svg';

    render(Button.factory({}, 'Button default'),
      document.getElementById('button'));

    render(Button.factory({
      icon: caretDownIcon
    }, 'Button icon'), document.getElementById('button-icon'));

    render(Button.factory({
      short: true,
    }, '...'), document.getElementById('button-short'));

    var container = document.getElementById('buttons');
    ['active', 'blue', 'danger', 'delayed', 'loader',
      'primary'].forEach(modifier => {
      var node = document.createElement('span');
      container.appendChild(node);

      render(Button.factory({
        [modifier]: true
      }, 'Button ' + modifier), node);
    });

  </file>
</example>
